<template>
  <el-row>
    <el-row>
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
        <el-form-item label="菜单名称">
          <el-input v-model="formInline.menuName" placeholder="菜单名称" clearable />
        </el-form-item>
        <el-form-item label="菜单类型">
          <el-select v-model="formInline.menuType" clearable placeholder="请选择">
            <el-option
              v-for="item in menuType"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button v-if="hasPerm('system:menu:page')" type="primary" @click="onSearch">查询</el-button>
          <el-button v-if="hasPerm('system:menu:create')" type="success" @click="dialog.createVisible=true">添加</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row>
      <el-row>
        <el-table
          :data="tableData"
          row-key="id"
          border
          style="width: 100%"
          header-row-class-name="headrow"
          :tree-props="{children: 'child', hasChildren: 'hasChildren'}"
        >
          <el-table-column prop="menuName" label="菜单名称" sortable width="160" />
          <el-table-column prop="menuType" label="类型" sortable width="100" align="center">
            <template slot-scope="scope">
              <el-tag :type="menuType.find(m => m.id === scope.row.menuType).type">
                {{ menuType.find(m => m.id === scope.row.menuType).name }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="routePath" label="路由路径" sortable width="140" />
          <el-table-column prop="componentPath" label="组件路径" sortable width="160" align="center" />
          <el-table-column prop="permission" label="权限标识" sortable width="140" align="center" />
          <el-table-column prop="isHidden" label="是否隐藏" sortable width="110" align="center">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.isHidden"
                active-color="#ff4949"
                inactive-color="#13ce66"
                @change="switchHidden(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column prop="isAffix" label="是否固定" sortable width="110" align="center">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.isAffix"
                active-color="#ff4949"
                inactive-color="#13ce66"
                @change="switchAffix(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column prop="creationTime" label="创建时间" sortable width="110" align="center" :formatter="formatter" />
          <el-table-column prop="creatorName" label="创建人" sortable width="110" align="center" />
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button v-if="hasPerm('system:menu:edit')" size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-popconfirm
                v-if="hasPerm('system:menu:delete')"
                title="确定删除吗？"
                style="margin-left:9px;"
                @onConfirm="handleDelete(scope.$index, scope.row)"
              >
                <el-button slot="reference" size="mini" type="danger">删除</el-button>
              </el-popconfirm>

            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-dialog
        v-if="dialog.createVisible"
        title="添加菜单"
        :visible.sync="dialog.createVisible"
        width="730px"
        :before-close="handleClose"
        top="7vh"
      >
        <create ref="create" :menu-type="menuType" @success="reload" />
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog.createVisible = false">取 消</el-button>
          <el-button type="primary" @click="Save('create')">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        v-if="dialog.editVisible"
        title="编辑菜单"
        :visible.sync="dialog.editVisible"
        width="730px"
        :before-close="handleClose"
      >
        <edit ref="edit" :menu="rowData" :menu-type="menuType" @success="reload" />
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog.editVisible = false">取 消</el-button>
          <el-button type="primary" @click="Save('edit')">确 定</el-button>
        </span>
      </el-dialog>
    </el-row>
  </el-row>
</template>

<script>
import { GetTreeNodes, deleteMenu, SwitchHidden, SwitchAffix } from '@/api/menu'
import create from './create.vue'
import edit from './edit.vue'
import moment from 'moment'
export default {
  name: 'VueElementAdminIndex',
  components: {
    create, edit
  },
  data() {
    return {
      formInline: {
        menuName: '',
        menuType: ''
      },
      tableData: [],
      menuType: [{
        id: 1,
        name: '目录',
        type: ''
      }, {
        id: 2,
        name: '菜单',
        type: 'success'
      }, {
        id: 3,
        name: '按钮',
        type: 'danger'
      }],
      httpMethod: [{
        id: 1,
        name: 'GET',
        type: ''
      }, {
        id: 2,
        name: 'POST',
        type: 'success'
      }, {
        id: 3,
        name: 'PUT',
        type: 'danger'
      }, {
        id: 4,
        name: 'DELETE',
        type: 'warning'
      }],
      dialog: {
        createVisible: false,
        editVisible: false
      },
      rowData: {}
    }
  },

  mounted() {
    this.loadData()
  },

  methods: {
    /** 加载数据 */
    loadData() {
      GetTreeNodes(this.formInline).then(m => {
        this.tableData = m.data
      })
    },
    /** 搜索 */
    onSearch() {
      this.loadData()
    },
    /** 格式化日期 */
    formatter(row, column, cellValue, index) {
      return moment(cellValue).format('YYYY-MM-DD')
    },
    handleEdit(index, row) {
      this.rowData = row
      this.dialog.editVisible = true
    },
    handleDelete(index, row) {
      deleteMenu({ id: row.id }).then(res => {
        this.loadData()
      })
    },
    /** 重载数据 */
    reload() {
      this.dialog.createVisible = false
      this.dialog.editVisible = false
      this.loadData()
    },
    /** 关闭提示 */
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    /** 保存数据 */
    Save(ref) {
      this.$refs[ref].submitForm('ruleForm')
    },
    /** 切换隐藏 */
    switchHidden(row) {
      SwitchHidden(row).then(res => {
        this.loadData()
      })
    },
    /** 切换固定 */
    switchAffix(row) {
      SwitchAffix(row).then(res => {
        this.loadData()
      })
    }
  }
}
</script>
